<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableMain">
      <div class="form">
        <el-form :inline="true" :model="ruleForm1" ref="ruleForm" >
          <el-form-item label="课程名称:">
            <el-input v-model="ruleForm1.title" placeholder="请输入课程名称"></el-input>
          </el-form-item>
          <el-select v-model="ruleForm1.type" placeholder="请选择通知类型" >
            <el-option value="系统通知"></el-option>
            <el-option value="课程通知"></el-option>
          </el-select>
          <el-form-item label="通知名:">
            <el-input v-model="ruleForm1.noticeName" placeholder="请输入通知名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search('ruleForm')">搜索</el-button>
            <el-button type="primary" @click="insertBefore1()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="title"
          label="通知课程"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="通知名字"
          width="150">
        </el-table-column>
        <el-table-column
          prop="type"
          label="通知类型"
          width="130">
        </el-table-column>
        <el-table-column
          prop="content"
          label="通知内容"
          width="280">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="通知时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="closeDialog"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

  <el-dialog :title=addtitle :visible.sync="dialogFormVisible" :show-close=close >
      <el-form :model="form"  ref="form" >
        <el-form-item label="通知课程" label-width="70px">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知类型" label-width="70px">
          <el-select v-model="form.type" placeholder="请选择通知类型" >
<!--          <el-input v-model="form.type" autocomplete="off">-->
            <el-option value="系统通知"></el-option>
            <el-option value="课程通知"></el-option>
<!--          </el-input>-->
          </el-select>
        </el-form-item>
        <el-form-item label="通知名字" label-width="70px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog(1)">取 消</el-button>
        <el-button type="primary" @click="edit()">确 定</el-button>
      </div>
  </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination.vue";
import {getNotice,deleteNotice, insertNotice,edit1} from "../../api/notice";

export default{

  components: {Pagination},
  data() {
    return {
      tableData:[],
      ruleForm1:{
        title: '',
        type:'',
        noticeName:''
      },
      form:{
        title:'',
        type:'',
        content:'',
        name:'',
        id:''
      },
      state2:'',
      title:'',
      addtitle:"发布通知",
      close : false,
      loading: true,
      state: true,
      classList:[],
      dialogFormVisible: false,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0//总记录数
      }
    }
  },
  created() {
    this.getAll(this.pagination.currentPage,this.pagination.pageSize,this.ruleForm1)
  },
  methods: {
    openDialog(){
      this.dialogFormVisible=true

    },
    closeDialog(currentPage){
      this.getAll(currentPage,this.pagination.pageSize,this.ruleForm1)
      this.dialogFormVisible=false
      this.form={};
    },
    handleEdit(index, row){
       console.log(index, row)
       this.form=row;
       this.openDialog()
       this.addtitle='修改通知'
    },
    insertBefore1(){
      this.addtitle="发布通知"
      this.openDialog()
    },
    edit(){
      if(this.addtitle==="发布通知"){
        insertNotice(this.form)
      }else{
        edit1(this.form)
      }
      this.closeDialog(1)
    },
    handleDelete(index,row){
      deleteNotice(row.id).finally(()=>{
        this.closeDialog(1)
      })
    },
    getAll(currentPage,pageSize,query){
      getNotice(currentPage,pageSize,query).then(req => {
        this.tableData = req.data.noticeList
        this.pagination.currentPage = req.data.page.current
        this.pagination.pageSize = req.data.page.size
        this.pagination.total = req.data.page.total
        console.log(req.data.page)
        this.loading = false
      })
    },
    callFather(){

    },
    search(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          getNotice("/notice/"+this.pagination.currentPage+"/"+this.pagination.pageSize,this.ruleForm1).then(req => {
            if(req.data.noticeList.length===0){
              this.$message.error("未查到相关数据")
            }else{
              this.tableData = req.data.noticeList
              this.pagination.currentPage = req.data.page.current
              this.pagination.pageSize = req.data.page.size
              this.pagination.total = req.data.page.total
              this.loading = false
            }
          })
        } else {
            this.$message.error("数据校验失败")
            return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.tableMain{
  margin-top: 20px;
}
</style>
